<template>
  <div>
    <div>
      <h2>{{this.formInfo.formName}}</h2>
    </div>

    <div
      v-for="(item, index) in answerArray"
      :key="(item, index)"
    >
      <el-card class="box-card" shadow="hover">
        <br />
        <br />
        <!-- 填空题 -->
        <div v-if="questionArray[index].questionType == 0 || questionArray[index].questionType == 3 || questionArray[index].questionType == 4 || questionArray[index].questionType == 5">
          <!--          {{ index + 1 }}、问题描述<br /><br />-->
          <h2>{{index+1}}、{{questionArray[index].questionName}}</h2>
          <!--          <el-button type="primary" @click="open">点击查看内容</el-button>-->
          <br>
          <el-button type="primary" @click="see(index)">点击查看</el-button>
          <!--          <span>{{index}}</span><br/>-->
          <el-dialog
            title="问题答案"
            :visible.sync="dialogVisible"
            width="30%">
            <div>
              <!--              <span>{{answerArray[i].total_message}}</span>-->
              <br>
              <!--              <span>{{i}}</span>-->
              <el-table
                :data="answerArray[i].total_message"
                height="250"
                style="width: 100%">
                <el-table-column
                  prop="desc">
                </el-table-column>
              </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 单选题 -->
        <div v-if="questionArray[index].questionType == 1 || questionArray[index].questionType == 2">
          <!--          {{ index + 1 }}、问题描述&nbsp;-->
          <h2>{{index+1}}、{{questionArray[index].questionName}}</h2>
          <br />
          <br />
          <!--          <span>{{answerArray[index].total_message}}</span>-->
          <br>
          <!--          <span>{{i}}</span>
                    <span>{{index}}</span>-->
          <el-table
            :data="answerArray[index].total_message"
            border
            show-summary
            sum-text="合计"
            style="width: 100%">
            <el-table-column
              prop="order_information"
              label="选项"
              width="180">
            </el-table-column>
            <el-table-column
              prop="number"
              label="小计"
              width="180">
            </el-table-column>
            <el-table-column
              prop="percentage"
              label="比例">
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-tag @click="open(index)">柱状</el-tag>
            <el-tag v-show="showCharts" type="success" @click="close">确认</el-tag>
<!--            <button  @click="close">确认</button>-->
<!--            <el-tag type="info" @click="open">柱状</el-tag>
            <el-tag type="warning" @click="open">条形</el-tag>-->
          </el-row>



          <!--          <div>{{answerArray[index].total_message}}</div>-->
        </div>

        <br />

      </el-card>
      <br />

    </div>

    <charts v-show="showCharts" :data="chartData"/>



  </div>

</template>

<script>

import { getFormInfo } from "@/api/forms/result.js"; //获取表单基本信息
import { getAnswerArray } from "@/api/forms/result.js"; //获取问题答案汇总
import charts from "@/views/forms/components/charts";



export default {
  components: {
    charts
  },
  data() {
    return {
      i: 0,
      chartPie: null,
      dialogVisible: false,
      formInfo: {},
      questionIid: "05WaLLpVSMrBsmwNh4YwW",
      questionLength:0,
      questionArray:[],
      answerArray: [], //所有题目数组
      showCharts: false,
      chartData: []
    }
  },
  created() {
    //this.GetQueryList()
    this.formInfo.formId=this.$route.query.formId;
    this.GetFormInfo();
  },
  methods: {

    GetFormInfo() {
      //fSaIrYz3DKLtC8gQgzA-q
      //打包数据
      var params = {
        formId: this.formInfo.formId, //表单id
        getFormInfo:true
      };
      //保存this
      var that = this;
      //调用接口，新建表单
      getFormInfo(params)
        .then((response) => {
          console.log(response);
          that.formInfo=response.form.formInfo;
          that.questionArray=response.form.questions;
          that.questionLength=response.form.formInfo.counts;
          console.log(that.questionArray);
          //console.log(that.questionArray[0].questionType);
          //console.log(that.questionArray[0].id);
          console.log(that.questionLength);
          this.GetAnswerArray();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    GetAnswerArray() {
      var that = this;      //保存this
      var len=that.questionLength;
      for(var j=0;j<len;j++){
        var params = {
          //"question_id":"05WaLLpVSMrBsmwNh4YwW", //问题id
          "question_id":that.questionArray[j].id,
          //"question_type":"1" //问题类型
          "question_type":that.questionArray[j].questionType
        };

        //调用接口，将问题结果汇总到answerArray中
        getAnswerArray(params)
          .then((response) => {
            console.log(response);
            that.answerArray.push(response.summerize_checkbox);
            //console.log(that.answerArray);
            //that.formInfo=response.form.formInfo;
            //that.questionArray=response.form.questions;
          })
          .catch((error) => {
            console.log(error);
          });
      };
      console.log(that.answerArray);
    },


    see(i){
      this.i=i;
      this.dialogVisible=true;
    },

    open(index) {
      console.log(this.answerArray[index].total_message)
      this.chartData = this.answerArray[index].total_message
      this.showCharts = true
    },

    close() {
      this.showCharts = false
    }
  }
}
</script>


